<template>
    <span v-if="sex == 0 || sex == 1" :style="style" class="sex-img">
        <image-vant
        :width="width" 
        :height="height" 
        :src="img" 
        />
    </span>
</template>

<script>
// 自定义方法
import { getProImg } from '_projectFn/images'

// 自定义组件
import ImageVant from "_components/project/common/ImageVant"

// 本地图片
import manSexIcon from '_assets/img/sex-man-icon.svg'
import womenSexIcon from '_assets/img/sex-women-icon.svg'

export default {
    name: 'SexIcon',
    props: {
        sex: {
            default: 0, // 0女 1男
        },
        width: {
            type: Number,
            default: 15,
        },
        height: {
            type: Number,
            default: 15,
        },
        top: {
            default: '',
        },
        imgSrc: {
            type: String,
            default: ''
        },
        isLazy: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            img: this.imgSrc || (this.sex == 0 ? getProImg("sex-women-icon.svg", womenSexIcon) : getProImg("sex-man-icon.svg", manSexIcon)),
            style: {
                width: this.width + 'px',
                height: this.height + 'px',
                top: typeof this.top === 'number' ? this.top + 'px' : '',
            }
        }
    },
    components: {
        ImageVant,
    }
}
</script>

<style>
.sex-img {
    cursor: pointer;
    display: inline-block;
    position: relative;
}
</style>